<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>我要开店</title>
    <script type="text/javascript" src="../files/js/base.js"></script>
    <link rel="stylesheet" type="text/css" href="../files/css/layui.css" media="all">
	<script type="text/javascript" src="../files/js/jquery.min.js"></script>
	<script src="../files/js/layui.js"></script>
	<script type="text/javascript">
		var code = null;

		var i = 60;

		function sendCode(){
			var phonenum = $("#phone").val();
			if (phonenum != null && phonenum!="") {
					var url = "../shop/phoneCode.action";
					var data = {phone : phonenum};
					$.get(url,data,function(msg){
						code = msg;
						console.info("code::"+code);
					},'json');

					var timer = window.setInterval("time()",1000);
					
					if(i==0 && i<0){
					    //去掉定时器的方法  
					    window.clearInterval(timer);
						$("#hintCode").html("获取验证码");
					}
			} else {
				$("#phone").attr("placeholder","请输入手机号");
			}
		}
		
		function time() {
			i-=1;
			$("#hintCode").text("获取验证码("+i+")");
		}
		
		function skip(){
			var pagecode = $("#code").val();
			if (pagecode == code) {
				window.location.replace("setupshop.html");
			}
	    };

	    function phone(){
		    var phone = $("#phone").val();
		    if(!(/^1[34578]\d{9}$/.test(phone)) && phone != null && phone!=""){
				$("#phone").val("");
				$("#phone").attr("placeholder","手机号码格式不正确");
		       return false;
		    }
		}
	    
	    function codeVerify(){
			var data = $("#code").val();
			if (data == code) {
				console.info("data=="+data+"  code:="+code);
				$('.hint-code').html("√");
			} else { 
				if (pagecode != null && pagecode != "") {
					$("#code").val("");
					$("#code").attr("placeholder","验证码输入错误");
				} else {
					$("#code").attr("placeholder","请输入验证码");
				}
			}
		}
	</script>
</head>

<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>开店信息</legend>
    </fieldset>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">商家电话</label>
            <div class="layui-input-inline">
                <input type="text" onblur="phone()" name="phone" id="phone" required lay-verify="required" placeholder="商家电话" autocomplete="off" class="layui-input" maxlength="11">
            </div>
    		<button type="button" onclick="sendCode()" id="hintCode" class="layui-btn layui-btn-primary">获取验证码</button>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-inline">
                <input type="text" name="code" onblur="codeVerify()" id="code" required lay-verify="required" placeholder="手机验证码" autocomplete="off" class="layui-input" maxlength="8">
            </div>
            <span class="hint-code" style="color:red"></span>
        </div>
    </div>
    <div align="center">
    	<input type="submit" onclick="skip()" class="layui-btn" lay-submit="" value="下一步">
    </div>
</body>

</html>